<template>
  <section class='f-login' :style="{'height': currentHeight + 'px'}">
    <div class="f-center" style="margin-top:90px">
      <img style="width:88px;height:88px;" src="@/assets/imgs/logo.jpg" alt="">
    </div>
    <div class="f-center f-mt-20">
      <p style="font-size: 24px;color: #000000;">欢迎使用淏咖宝</p>
    </div>
    <van-form class="f-form" @submit="onSubmit">
      <van-cell-group inset style="background-color: transparent;">
        <van-field v-model="form.account" clearable name="account" placeholder="请输入11位手机号" maxlength="11"
          :rules="[{ required: true, message: '请填写11位手机号' }]">
          <template #left-icon>
            <img style="width:15px;height:20px;margin-top:3px" class="f-mr-10" src="@/assets/icons/login_icon_phone.png" alt="">
          </template>
        </van-field>
        <van-field class="f-cell" v-model="form.password" :type="form.showPassword?'':'password'" clearable name="password"
          placeholder="密码" style="border-bottom:1px solid red" :rules="[{ required: true, message: '请填写密码' }]">
          <template #left-icon>
            <img style="width:17px;height:20px;margin-top:3px" class="f-mr-10" src="@/assets/icons/login_icon_passward.png"
              alt="">
          </template>
          <template #right-icon>
            <van-icon v-show="!form.showPassword" name="closed-eye" @click="form.showPassword = true" />
            <van-icon v-show="form.showPassword" name="eye-o" @click="form.showPassword = false" />
          </template>
        </van-field>
        <van-field v-show="false" />
      </van-cell-group>
      <section class="f-flex-between" style="font-size: 12px;color: #424242;padding: 10px 32px">
        <van-checkbox v-model="keepPWD" shape="square" icon-size="15px" checked-color="#FF7C07">记住密码</van-checkbox>
        <p @click="toForget">忘记密码？</p>
      </section>
      <div class="f-submit-btn">
        <van-button round block type="primary" color="#FF7C07" native-type="submit">
          登录
        </van-button>
      </div>
    </van-form>

    <img class="f-img" src="@/assets/imgs/jhh_login_bg.png" alt="">

    <section class="f-bottom">
      <van-checkbox v-model="checked" checked-color="#3366FF" icon-size="15px">我已阅读并同意
        <span class="link-box" @click.stop="lookxieyi(0)">《用户协议》</span>和
        <span class="link-box" @click.stop="lookxieyi(1)">《隐私政策》</span>
      </van-checkbox>
    </section>

    <xieyi-pop ref="xieyiPopRef" />
  </section>
</template>
<script>
import { ref, reactive, toRefs, onMounted, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { useStore } from "vuex";
import JsBridge from '@/utils/JsBridge.js'
import { showToast, showLoadingToast, closeToast, contactListProps, showConfirmDialog } from 'vant';
import { removeStore, setStore, getStore, warningDeal } from '@/utils/utils';
import hexMD5 from "@/utils/md5.min.js"
import api from './api'
import xieyiPop from '@/components/xieyiPop.vue'

export default {
  components: {
    xieyiPop,
  },
  setup(props, context) {
    const store = useStore()

    const router = useRouter()
    const route = useRoute();

    const xieyiPopRef = ref(null)

    const state = reactive({
      form: {
        // account: '15900030001',
        // account: '18811310937',
        // password: '123456',
        account: '',
        password: '',
      },

      keepPWD: false,
      checked: false,
      currentHeight: ''
    })

    onMounted(() => {
      // 设置app基座连接地址
      let json = {
        domain: getUrl()
      }
      JsBridge.callHandler("setDomain", json, (res) => {
        console.log('setDomain 响应值 ： ', res);
      })

      state.currentHeight = window.innerHeight

      removeStore('USER_INFO')
      let userAccont = getStore('USER_ACCONT')
      if (userAccont) {
        state.keepPWD = true
        state.form.account = userAccont.account
        state.form.password = userAccont.password
      }
    })

    const getUrl = () => {
      let url = ``
      if (WEB_SOURCE.mode == "master") {
        url = `https://jihehao.yilianyun.top/`
      } else {
        url = `http://192.168.10.110:6060/`
      }
      return url
    }

    const onSubmit = async (values) => {
      let json = {
        "account": values.account,
        "password": hexMD5(values.password),
        noAuthorization: true
      }

      if (!state.checked) {
        await showConfirmDialog({
          title: '用户使用协议',
          message:
            '我已阅读并同意《用户使用协议》',
          confirmButtonText: '同意',
          cancelButtonText: '拒绝',
        })
          .then(() => {
            state.checked = true
          })
          .catch(() => {
            return
          })
      }

      if (!state.checked) {
        // warningDeal('请同意用户使用协议')
        return
      }

      showLoadingToast({
        message: '登录中...',
        forbidClick: true,
        duration: 0,
      });

      api.login(json).then(res => {
        setStore('USER_INFO', res.data)

        if (state.keepPWD) {
          setStore("USER_ACCONT", {
            "account": values.account,
            "password": values.password
          });
        } else {
          removeStore("USER_ACCONT")
        }
        router.replace('/home')
      })

      return
      JsBridge.callHandler('login', json, (response) => {
        let res = JSON.parse(response)
        if (res.code == 200) {
          closeToast()
          setStore('USER_INFO', res.data)
          router.replace('/home')

          if (state.keepPWD) {
            setStore("USER_ACCONT", json);
          } else {
            removeStore("USER_ACCONT")
          }
        } else {
          showToast(res.msg ? res.msg : res.error)
        }
      })
    };

    const toForget = () => {
      router.push({
        path: '/forget'
      })
    }

    function lookxieyi(type) {
      xieyiPopRef.value.dialogShow(type)
    }

    return {
      ...toRefs(state),
      xieyiPopRef,
      onSubmit,
      toForget,
      lookxieyi,
    }
  }
}
</script>
<style lang='scss' scoped>
.f-login {
  position: relative;
  overflow: hidden;
  .f-form {
    margin-top: 50px;
  }
  .f-submit-btn {
    margin-top: 70px;
    padding: 0 60px;
  }
  .f-img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  .f-bottom {
    position: absolute;
    bottom: 10px;
    left: 0px;
    width: 100%;
    display: flex;
    justify-content: center;
    font-size: 13px;
    color: #424242;
    .van-checkbox__icon--round .van-icon {
      border-color: #424242;
    }
    .van-checkbox__icon--checked .van-icon {
      border-color: var(--van-checkbox-checked-icon-color);
    }
  }

  .van-cell {
    background-color: transparent;
  }

  .link-box {
    text-decoration: underline;
    color: #3366ff;
  }
}
</style>